<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>

<body>

<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>套餐详情</b></font></h1>
</header>

<div class="mui-content">
	<ul class="mui-table-view">
		<li class="mui-table-view-cell mui-media" >
			<a href="#" style="background-color: cadetblue;margin: 7px;border-radius:10px;;height: 110px">
				<p class="mui-pull-right" style="color: white" th:text="${list.chnname}"></p>
				<h2 class="mui-title" style="color: white;line-height: 4;text-align: center;font-size: 25px;font-weight: 700" th:text="${list.tcname}"></h2>
				<p style="color: white">有效期:<span th:text="${list.useenddate}"></span></p>
			</a>
		</li>
	</ul>
	<div class="weui-cells weui-cell_access" style="margin-top: 0px">
		<div class="weui-cell">
			<div class="weui-cell__hd"><i class="fa fa-handshake-o fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;</div>
			<div class="weui-cell__bd">
				<h4 style="margin-bottom: 0px">服务项目</h4>
			</div>
		</div>
	</div>
    <ul class="mui-table-view" >
		<li class="mui-table-view-cell mui-media">
			<a href="#" th:each="servitem:${servitem}">
				<div class="weui-flex">
					<div class="weui-flex__item" style="flex-grow: 8">
						<div class="mui-media-body" style="white-space: normal">
							<h4 style="margin-left: 10px" th:text="${servitem.servitemname}"></h4>
						</div>
					</div>
					<div class="weui-flex__item" style="flex-grow: 1">
						<p >X<span th:text="${servitem.tcount}"></span></p>
					</div>
				</div>
			</a>
		</li>
	</ul>
	<div class="weui-cells__title"></div><!--间隔-->
	<div class="weui-cells weui-cell_access" style="margin-top: 0px">
		<div class="weui-cell" >
			<div class="weui-cell__hd"><i class="fa fa-handshake-o fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;</div>
			<div class="weui-cell__bd">
				<h4 style="margin-bottom: 0px">材料</h4>
			</div>
		</div>
	</div>
	<ul class="mui-table-view" >
		<li class="mui-table-view-cell mui-media" >
			<a href="#" th:each="met:${met}">
				<div class="weui-flex">
					<div class="weui-flex__item" style="flex-grow: 8">
						<div class="mui-media-body" style="white-space: normal">
							<h4 style="margin-left: 10px" th:text="${met.mname}"></h4>
						</div>
					</div>
					<div class="weui-flex__item" style="flex-grow: 1">
						<p >X<span th:text="${met.mcount}"></span></p>
					</div>
				</div>
			</a>
		</li>
	</ul>
	<div class="weui-cells__title"></div><!--间隔-->
	<!--<div class="weui-cells weui-cell_access" style="margin-top: 0px" th:onclick="'javascript:payhistory(\''+${mouldtc.cardid}+'\')'">-->
		<!--<div class="weui-cell" style="line-height:2">-->
			<!--<div class="weui-cell__hd"><i class="fa fa-pencil-square-o fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;</div>-->
			<!--<div class="weui-cell__bd">-->
				<!--<h4>消费记录</h4>-->
			<!--</div>-->
			<!--<div class="weui-cell__ft"></div>-->
		<!--</div>-->
	<!--</div>-->
	<div class="weui-cells__title"></div><!--间隔-->
	<div class="weui-cells " style="margin-top: 0px">
		<div class="weui-cell" style="line-height:2" >
			<div class="weui-cell__hd"><i class="fa fa-hand-o-down fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;</div>
			<div class="weui-cell__bd">
				<h4>备注说明</h4>
			</div>
			<div class="weui-cell__ft"></div>
		</div>
	</div>
	<ul class="mui-table-view" >
		<li class="mui-table-view-cell mui-media" >
			<a href="#" >
				<div class="mui-media-body" style="white-space: normal">
					<p th:text="${list.remark}"></p>
				</div>
			</a>
		</li>
	</ul>

</div>

</body>

</html>
